<!-- show-info 信息展示框 -->
<template>
    <el-form-item :label="name" class="c-item">
        <!-- slot 插槽模式 -->
        <template v-if="$slots.default">
            <span>
                <slot></slot>
            </span>
            
        </template>
        
        <!-- 如果 value 为空 -->
        <span v-else-if="!value">无</span>
        
        <!-- text 普通信息展示 -->
        <span v-else-if="type === 'text'">{{ value }}</span>

        <!-- num 数字 -->
        <span v-else-if="type === 'num'" class="tc-num">{{ value }}</span>

        <!-- dict -->
        <span v-else-if="type === 'dict'" class="tc-num">{{ dicts[dictName].find(item => item.value == value).label }}</span>

        <!-- date 日期 -->
        <span v-else-if="type === 'date'" class="tc-date">{{ sa.forDate(value) }}</span>

        <!-- datetime 日期时间 -->
        <span v-else-if="type === 'datetime'" class="tc-date">{{ sa.forDate(value, 2) }}</span>

        <!-- color 颜色 -->
        <div v-else-if="type === 'color'">
            <span class="show-color-item" :style="{backgroundColor: value}"></span>
            <span style="color: #666">{{ value }}</span>
        </div>
        
        <!-- rate 评分组件 -->
        <div v-else-if="type === 'rate'"
             style="line-height: 0;">
            <el-rate :modelValue="value" show-text disabled></el-rate>
        </div>
        
        <!-- money 金额，单位：元 -->
        <b v-else-if="type === 'money'" class="c-price">￥{{value}}</b>
        
        <!-- money-f 金额，单位：分 -->
        <b v-else-if="type === 'money-f'" class="c-price">￥{{value / 100}}</b>
        
        <!-- img 图片 -->
        <img v-else-if="type === 'img'" 
             :src="value" class="nar-img" @click="sa.showImage(value, '400px', '400px')" alt="img" />
        
        <!-- audio、video、file -->
        <el-link v-else-if="['audio', 'video', 'file'].indexOf(type) !== -1" 
                 type="info" :href="value" target="_blank">{{value}}</el-link>

        <!-- rich-text 富文本 -->
        <div v-else-if="type === 'rich-text'" class="editor-box content-box-info">
            <div v-html="value"></div>
        </div>
        
        <!-- link 连接 -->
        <el-link v-else-if="type === 'link'" 
                 type="primary" :href="value" target="_blank">{{value}}</el-link>
        
        
    </el-form-item>
</template>

<script setup name="show-info">
import {getCurrentInstance} from "vue";
import dicts from "@/utils/dict";
const { proxy } = getCurrentInstance();

defineProps({
    // 类型
    type: {
        default: 'text'
    },
    // 标题 
    name: {},
    // 绑定值 
    value: {},
    dictName: ''
})

// input值发生变化时触发
const onInput = function($event) {
    // console.log('change', $event)
    proxy.$emit('update:modelValue', $event);
};

</script>

<style scoped lang="scss">
.c-item{
    span{
        min-width: 220px;
        background: #f6f8fd;
        padding: 1px 10px;
        border-radius: 4px;
        min-height: 30px;
    }
}
</style>
